@{
    ViewData["Title"] = "添加装箱单";
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">
            <span class="layui-breadcrumb">
                <a href="/Packing/Index">装箱管理</a>
                <a><cite>添加装箱单</cite></a>
            </span>
        </div>
        <div class="layui-card-body">
            <form class="layui-form" id="packingForm" lay-filter="packingForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">装箱单编号 <span style="color: red;">*</span></label>
                        <div class="layui-input-inline">
                            <div class="layui-input-group">
                                <input type="text" name="packingCode" required lay-verify="required" placeholder="请输入装箱单编号" autocomplete="off" class="layui-input" id="packingCodeInput">
                                <div class="layui-input-suffix">
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="autoGenerateCode()">自动生成</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">装箱日期 <span style="color: red;">*</span></label>
                        <div class="layui-input-inline">
                            <input type="text" name="packingDate" required lay-verify="required" placeholder="请选择装箱日期" autocomplete="off" class="layui-input" id="packingDateInput">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">销售订单编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="saleOrderCode" placeholder="请输入销售订单编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">发票编号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="invoiceCode" placeholder="请输入发票编号" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">客户编码</label>
                        <div class="layui-input-inline">
                            <div class="layui-input-group">
                                <input type="text" name="customerCode" placeholder="请输入客户编码" autocomplete="off" class="layui-input" id="customerCodeInput">
                                <div class="layui-input-suffix">
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="selectCustomer()">
                                        <i class="layui-icon layui-icon-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="customerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">箱长度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="packingLength" placeholder="请输入箱长度" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">箱宽度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="packingWidth" placeholder="请输入箱宽度" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">箱高度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="packingHeight" placeholder="请输入箱高度" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">尺寸单位</label>
                        <div class="layui-input-inline">
                            <select name="packingSize">
                                <option value="">请选择尺寸单位</option>
                                <option value="mm">毫米(mm)</option>
                                <option value="cm">厘米(cm)</option>
                                <option value="m">米(m)</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">检查员</label>
                        <div class="layui-input-inline">
                            <input type="text" name="inspector" placeholder="请输入检查员" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">净重</label>
                        <div class="layui-input-inline">
                            <input type="text" name="netWeight" placeholder="请输入净重" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">毛重</label>
                        <div class="layui-input-inline">
                            <input type="text" name="grossWeight" placeholder="请输入毛重" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">重量单位</label>
                        <div class="layui-input-inline">
                            <select name="unitWeight">
                                <option value="">请选择重量单位</option>
                                <option value="g">克(g)</option>
                                <option value="kg">千克(kg)</option>
                                <option value="t">吨(t)</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-inline">
                        <select name="state">
                            <option value="0">草稿</option>
                            <option value="1">已确认</option>
                            <option value="2">已完成</option>
                            <option value="3">已取消</option>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="saveForm">保存</button>
                        <button type="button" class="layui-btn layui-btn-primary" onclick="backToList()">返回</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
layui.use(['form', 'laydate'], function(){
    var form = layui.form,
        laydate = layui.laydate,
        $ = layui.jquery;
        
    // 初始化日期选择器
    laydate.render({
        elem: '#packingDateInput',
        value: new Date().toISOString().split('T')[0]
    });
    
    // 监听表单提交
    form.on('submit(saveForm)', function(data){
        $.ajax({
            url: '/Packing/Create',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(data.field),
            success: function(res){
                if(res.success){
                    layer.msg('创建成功', {
                        time: 1000
                    }, function(){
                        window.location.href = '/Packing/Index';
                    });
                } else {
                    layer.msg(res.message || '创建失败');
                }
            },
            error: function(){
                layer.msg('创建失败，请检查网络连接');
            }
        });
        return false;
    });
});

// 自动生成编号
function autoGenerateCode() {
    var date = new Date();
    var year = date.getFullYear();
    var month = (date.getMonth() + 1).toString().padStart(2, '0');
    var day = date.getDate().toString().padStart(2, '0');
    var random = Math.floor(Math.random() * 1000).toString().padStart(3, '0');
    var code = 'PACK' + year + month + day + random;
    $('#packingCodeInput').val(code);
}

// 选择客户
function selectCustomer() {
    layer.msg('请实现客户选择功能');
}

// 返回列表
function backToList() {
    window.location.href = '/Packing/Index';
}
</script> 